<template>
    <div id="testTools" class="test-tools" style="height: 100%;">
      <div class="contentBox" style="width: 30%;padding: 20px 16px 20px 20px;">
        <service-list  @serviceCall="serviceCall"/>
      </div>
      <div class="contentBox" style="width: 70%;padding: 20px 20px 20px 0">
        <common-content @doDataShow="doDataShow"  style="height: 100%;width: 100%" v-if="CommonContentShow" :zySid="zySid" :zyDataList="zyDataList" />
      </div>
      <CaseList v-if="isCase" :type="type" :dialogVisibleCase="dialogVisibleCase" :node="node" @closeCaseCall="closeCaseCall"/>
      <el-dialog title="接口详情" :visible.sync="isInterface" :before-close="closeTask" top="50px" width="90%">
        <InterfaceDetails :node="node"/>
      </el-dialog>
    </div>
</template>
<script>
  import ServiceList from '@/rdComponent/common/ServiceList.vue';
  import InterfaceDetails from '@/rdComponent/common/InterfaceDetails.vue';
  import CommonContent from '@/rdComponent/common/testTools.vue';
  import CaseList from './component/CaseList.vue';
    export default {
        name: "Index",
        components:{
          ServiceList,
          CommonContent,
          CaseList,
          InterfaceDetails
        },
        data(){
          return {
            style:'',
            /*刷新组件*/
            CommonContentShow: true,
            dialogVisibleCase:false,
            /*传入的sid*/
            node:{},
            isInterface:false,
            isCase:false,
            zySid: "",
            type:1,//用例管理
            zyDataList: [
              {
                name: "配置",
                isIcon: true,
                iconName: "el-icon-edit-outline",
                btnIndex: 1,
              },
              {
                name: "查看接口详情",
                isIcon: true,
                iconName: "el-icon-document",
                btnIndex: 2,
              }
            ],
          }
        },
      created(){
        this.systemStyle()
      },
      methods:{
        serviceCall (id) {
          /*根据实例id查询对应的实例出来*/
          this.zySid = id;
          this.CommonContentShow =  false;
          this.$nextTick(()=>{
            this.CommonContentShow = true;
          })
        },
        //关闭弹窗
        closeCaseCall(){
          this.dialogVisibleCase=false
        },
        //关闭弹窗
        closeTask(){
          this.isInterface = false;
        },
        //设置高度
        systemStyle(){
          this.clientHeight = document.documentElement.clientHeight
          this.style="height:"+(this.clientHeight-94)+'px;background:#e2eaed;padding-left:10px;'
        },
        //回调
        doDataShow(backData){
          this.node = backData.data
          if(backData.fn==1) {//用例列表
            this.dialogVisibleCase = true
            this.isCase = false
            this.$nextTick(() => {
              this.isCase = true
            })
          }else if(backData.fn==2){//接口详情
            this.isInterface=true
          }
        }
      }
    }
</script>
<style lang="less" scoped>
  .index-left{float:left;width:40%;}
  .index-right{float:right;width:60%;}
  #testTools{
    font-size: 0;
    overflow-x: hidden;
    background-color:#e2eaed;
  }

  #testTools .contentBox{
    display: inline-block;
    /*padding: 10px;*/
    height: 100%;
    box-sizing: border-box;
    vertical-align: top;
    overflow-x: hidden;
  }

  #testTools .configureOut .messageBox{
    padding: 20px 20px 0px 20px;
  }
</style>
